<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<title>${subject == null ? '发布' : '编辑'}官网</title>
<%@include file="../include/commonFile.jsp" %>
<link rel="stylesheet" href="${ctx}/css/common/list.css">
<link rel="stylesheet" href="${ctx}/css/ui/subject/publish_subject.css">
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
	<%@include file="../include/sidebar.jsp"%>
	<!--内容-->
	<section>
		<div class="section-main">
			<!-- 正文请写在这里 -->
			<div class="add-form-content">
			<form id="myForm" class="layui-form mt20" method="post" action="${ctx}/subject/subject/save.do">
				<input type="hidden" lay-verify="groupIsExpire" />
				<div class="layui-form-item">
					<label class="layui-form-label">名称<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="专题名称" class="layui-input" value="${subject.name}">
						<input type="hidden" name="id" value="${subject.id}"/>
					</div>
				</div>
				<div class="layui-form-item" id="pic_content">
					<label class="layui-form-label">封面图<span class="f-verify-red">*</span></label>
					<div class="cover-content">
						<input type="hidden" name="picture" id="pic" lay-verify="pic" value="${subject.picture}" />
						<c:if test="${subject == null || empty subject.picture}">
							<span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
						</c:if>
						<c:if test="${subject != null && not empty subject.picture}">
							<span id="cover-img" class="cover-img" style="background-image:url('${subject.picture}')"></span>
						</c:if>
						<a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加封面图</a>
						<div class="form-word-aux">建议尺寸：800x450</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">模板<span class="f-verify-red">*</span></label>
					<input type="hidden" id="tempType" name="tempType" value="${subject.tempType}"/>
					<div class="layui-input-block" id="temp_items">
				   		<div data-type="1" class="temp-item <c:if test="${subject == null || subject.tempType == 1}">active</c:if>" style="background-image:url(${ctx}/image/subject/subject_temp1.png)"><span class="item-check"><i class="iconfont icon-check"></i></span></div>
				   		<div data-type="2" class="temp-item <c:if test="${subject.tempType == 2}">active</c:if>" style="background-image:url(${ctx}/image/subject/subject_temp2.png)"><span class="item-check"><i class="iconfont icon-check"></i></span></div>
				    </div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">行栏目个数<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
						<input type="number" min="1" max="5" name="colNum" lay-verify="colNum" style="width: 10%" autocomplete="off"  class="layui-input" value="${subject.colNum}">
					</div>
				</div>
				<div class="layui-form-item" id="showpic_content"  <c:if test="${subject == null || subject.tempType == 1}">style="display:none"</c:if>>
					<label class="layui-form-label">是否显示封面图<span class="f-verify-red">*</span></label>
				     <div class="layui-input-block">
				      	<input type="radio" name="showPic" value="1" title="显示" <c:if test="${subject == null|| subject.showPic ==null || subject.showPic == 1}">checked=""</c:if>>
				      	<input type="radio" name="showPic" value="0" title="不显示" <c:if test="${subject.showPic == 0}">checked=""</c:if>>
				    </div>
				</div>

				<div class="layui-form-item" id="bgpic_content" <c:if test="${subject == null  || subject.tempType == 1}">style="display:none"</c:if>>
					<label class="layui-form-label">背景图<span class="f-verify-red">*</span></label>
					<div class="cover-content">
						<input type="hidden" name="bgPic" id="bgPic" lay-verify="bgPic" value="${subject.bgPic}" />
						<c:if test="${subject == null || empty subject.bgPic}">
							<span id="bg_img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
						</c:if>
						<c:if test="${subject != null && not empty subject.bgPic}">
							<span id="bg_img" class="cover-img" style="background-image:url(${subject.bgPic})"></span>
						</c:if>
						<a class="layui-btn layui-btn-danger" id="sel_bg_img">+添加背景图</a>
						<div class="form-word-aux" data-type="2">建议尺寸：900x1600</div>
					</div>
				</div>
				<div class="layui-form-item"> 
					<label class="layui-form-label">描述<span class="f-verify-red">*</span></label>
					<div class="layui-input-block">
				   		<textarea name="remarks" placeholder="专题描述" lay-verify="remarks" class="layui-textarea" >${subject.remarks}</textarea>
				    </div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/subject/subject/subjectList.do" class="layui-btn layui-btn-primary">取消</a>
					</div>
				</div>
			</form>
			</div>
		</div>
		<!--底部-->
		<%@include file="../include/footer.jsp" %>
		<c:set var="isExpire" value="${memberForm:isExpire(sessionScope.newCurrentUser.id, null)}"/>
	</section>
</div>
<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script>
    var form, formcache;

    txz.initHeader({
        nav:[{
            name: '手机官网',
            href: '${ctx}/subject/subject/subjectList.do'
        },{
            name: '${empty subject.id ? "发布官网" : "编辑官网"}',
            curr: true
        }],
        btns:[{
            name: '返回',
            icon: 'back',
            href: '${ctx}/subject/subject/subjectList.do'
        }]
    });

	$(function() {
        layui.use(['form'], function () {
            form = layui.form, laydate = layui.laydate;

            //自定义验证规则
            form.verify({
                groupIsExpire: function() {
                    if ('${isExpire}' == 'true' && '${subject.id}' == '') {
                        txz.openExpireDialog();
                        return false;
                    }
                    return "";
                },
                name : function(value) {
                    if (value == "") {
                        return '请填写专题名称';
                    }
                },
                pic : function(value) {
                    if (value == "") {
                        return "请上传专题封面图";
                    }
                },
                bgPic : function(value) {
                    if($('#tempType').val() == 2){
                        if (value == "") {
                            return "请上传专题背景图";
                        }
                    }
                },
                colNum:function(value){
                    if(value == ""){
                        return "请填写每行显示栏目数";
                    }
                    if(value > 5){
                        return "每行最多显示5个栏目";
                    }
                    if(value < 2){
                        return "每行至少显示2个栏目";
                    }
                },
                remarks : function(value) {
                    if (value == "") {
                        return '请填写专题描述';
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    var formData = getFormData();
                    txz.ajaxRequest({
                        method: 'post',
                        url: action,
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/subject/subject/subjectList.do";
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    })
                });
                return false;
            });

            //加载缓存
			if(!'${subject.id}'){
				formcache = new fCache({
					fCacheKey: 'form_cache_subject',//暂存的key
					cacheCallback: loadCacheData,//获取到缓存后加载的方法
					getFormData: getFormData
				}).init();
			}
            txz.saveStatus = false;
            form.render('radio');
        });
        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.SUBJECT.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        });
        $('#sel_bg_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：900x1600',
                type: '<%=TargetType.SUBJECT.getCode()%>',
                cb: function (imgs) {
                    $('#bg_img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#bgPic').val(imgs[0].path);
                }
            })
        });
		$('#temp_items .temp-item').click(function(){
			$('#temp_items .temp-item.active').removeClass('active');
			$(this).addClass('active');
			var type = $(this).data('type');
			$('#tempType').val(type);
			if(parseInt(type) == 2){
				$('#bgpic_content').css('display','inherit');
				$('#showpic_content').css('display','inherit');
			}else{
				$('#bgpic_content').css('display','none');
				$('#showpic_content').css('display','none');
			}
		});
	})
    function getFormData() {
        return util.serializeForm($('#myForm').serializeArray());
    }
    //此方法用于加载缓存数据
    function loadCacheData(cacheData) {
	    if(cacheData['picture']){
            $('#cover-img').css('background-image', 'url(' + cacheData['picture'] + ')');
        }
        if(cacheData['bgPic']){
            $('#bg_img').css('background-image', 'url(' + cacheData['bgPic'] + ')');
        }
	    if(cacheData['tempType']){
	        var type = cacheData['tempType'];
            $('#temp_items .temp-item.active').removeClass('active');
            $('#temp_items .temp-item[data-type="'+type+'"]').addClass('active');
            $('#tempType').val(type);
            if(parseInt(type) == 2){
                $('#bgpic_content').css('display','inherit');
                $('#showpic_content').css('display','inherit');
            }else{
                $('#bgpic_content').css('display','none');
                $('#showpic_content').css('display','none');
            }
		}
        form.render();
    }
</script>
</body>
</html>